<template>
  <div class="box">
    <div id="" style="margin-bottom: 30px;">
      <el-button :type="type=='数据任务分析'?'primary':''" v-has @click="type='数据任务分析'">数据任务分析</el-button>
      <el-button :type="type=='任务明细查询'?'primary':''" v-has @click="type='任务明细查询'">任务明细查询</el-button>
      <el-button :type="type=='任务跟踪回溯'?'primary':''" v-has @click="type='任务跟踪回溯'">任务跟踪回溯</el-button>
    </div>

    <template v-if="type=='数据任务分析'">
      <el-table :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper1'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]!='发布'"
                @click="scope.row[item.title]='发布',release()">发布</el-button>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]=='发布'"
                @click="scope.row[item.title]='未发布',Unpublished()">已发布</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='任务明细查询'">
      <el-table :data="tableData2" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">明细查询</el-button>
              <el-button type="primary" size="mini">明细统计</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='任务跟踪回溯'">
      <el-table :data="tableData3" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead3" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper3'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">明细查询</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "任务编号",
            title: "id",
          },
          {
            id: 2,
            label: "数据任务名称",
            title: "name",
          },
          {
            id: 4,
            label: "任务执行结果",
            title: "result",
          },
          {
            id: 5,
            label: "操作",
            title: "oper1",
          }
        ],
        tableData1: [{
          id: "1",
          name: '提取任务102',
          result: '等待结果返回中',
          oper1: '发布'
        }],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "任务编号",
            title: "id",
          },
          {
            id: 2,
            label: "数据任务名称",
            title: "name",
          },
          {
            id: 3,
            label: "任务状态",
            title: "status",
          },
          {
            id: 4,
            label: "任务执行结果",
            title: "result",
          }
        ],
        tableData2: [{
          id: "1",
          name: '提取任务102',
          status: '已进行',
          result: '另存为->正在提取',
          oper2: '发布'
        }],



        tableHead3: [{
            id: 1,
            label: "业务编号",
            title: "id",
          },
          {
            id: 2,
            label: "主题",
            title: "name",
          },
          {
            id: 3,
            label: "流程状态",
            title: "status",
          },
          {
            id: 4,
            label: "业务类型",
            title: "busType",
          },
          {
            id: 5,
            label: "流程分类",
            title: "flowType",
          },
          {
            id: 6,
            label: "发起人",
            title: "initiator",
          },
          {
            id: 7,
            label: "发起时间",
            title: "startTime",
          },
          {
            id: 8,
            label: "结束时间",
            title: "endTime",
          },
        ],
        tableData3: [{
          id: "1",
          name: '提取任务102',
          status: '已结束',
          busType: '数据提取',
          flowType: 'flowType1',
          initiator: '张国强',
          startTime: '2021年10月26日10:42:55',
          endTime: '2021年10月26日10:43:23',
          oper3: '发布'
        }]



      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      },
      release() {
        this.$message({
          type: 'success',
          message: '发布成功'
        })
      },
      Unpublished() {
        this.$message({
          type: 'error',
          message: '取消发布'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
